x<template>
    <div>
        <Modal v-model="affirmModal" title="确认操作" width="20" @on-ok="handleSubmit">
            <div style="text-align:center"> <p>是否确认保存!</p> </div>
        </Modal>
        <Button v-if="showBackBtn" class="goBack" type="primary" @click="$router.back()"><Icon type="ios-arrow-back" /> 返回  </Button>
        <Form ref="formCustom" :model="formCustom" :rules="formRules" :label-width="150">
            <h3>项目基本情况</h3>
            <Card class="line-style">
            <div class="line-wrap">
                <div class="line-main">
                     <Row>
                         <Col span="7">
                             <FormItem label="项目名称" prop="xmmc">
                                 <Input type="text" v-model="formCustom.xmmc" placeholder="请填写项目名称"/>
                             </FormItem>
                         </Col>
                         <Col span="7">
                             <FormItem label="建设单位名称" prop="jsdwmc">
<!--                                 <Tooltip content="项目建设时的建设单位名称" placement="top-start">-->
                                 <Input type="text" v-model="formCustom.jsdwmc" placeholder="请填写建设单位名称"/>
<!--                                     <Cascader :data="data" v-model='formCustom.jsdwmc' change-on-select placeholder="请填写建设单位名称"></Cascader>-->
<!--                                 </Tooltip>-->
                             </FormItem>
                         </Col>
<!--                         <Col span="7">-->
<!--                             <FormItem  label="联系人" prop="lxr">-->
<!--                                 <Input type="text" v-model="formCustom.lxr" placeholder="请填写联系人"  @on-blur="isWu(formCustom.lxr,'formCustom.lxr')"/>-->
<!--                             </FormItem>-->
<!--                         </Col>-->
<!--                         <Col span="7">-->
<!--                             <FormItem  label="手机号" prop="sjh">-->
<!--                                 <Input type="text" v-model="formCustom.sjh" placeholder="请填写手机号"  @on-blur="isWu(formCustom.sjh,'formCustom.sjh')"/>-->
<!--                             </FormItem>-->
<!--                         </Col>-->
                         <Col span="7">
                             <FormItem  label="拦标价金额">
                                 <Input type="number" v-model="formCustom.lbjje" placeholder="请填写拦标价金额">
                                     <span slot="append">万元</span>
                                 </Input>
                             </FormItem>
                         </Col>
                         <Col span="7">
                             <FormItem  label="实际投资额" prop="sjtze">
                                 <Input type="number" number v-model="formCustom.sjtze" placeholder="请填写实际投资额额">
                                     <span slot="append">万元</span>
                                 </Input>
                             </FormItem>
                         </Col>
<!--                         <Col span="7">-->
<!--                             <Form-item label="上报日期" prop="sbrq">-->
<!--                                 <DatePicker @on-change="dateChange" :value="formCustom.sbrq" :options="timeLimit"-->
<!--                                             format="yyyy-MM-dd"  type="date" placeholder="选择上报日期" ></DatePicker>-->
<!--                             </Form-item>-->
<!--                         </Col>-->
<!--                     </Row>-->
<!--                    <Row>-->
                         <Col span="14">
                             <FormItem  label="项目简单概述" prop="xmjdms">
                                 <Input v-model="formCustom.xmjdms" maxlength="100" show-word-limit type="textarea" placeholder="请填写项目简单概述（100字以内）" />
                             </FormItem>
                         </Col>
                    </Row>

                </div>
            </div>
        </Card>
            <h3>招标情况</h3>
            <Card class="line-style">
                <Row>
                    <Col span="7">
                        <FormItem  label="是否招标" prop="sfzb">
                            <RadioGroup v-model="formCustom.sfzb" type="button">
                                <Radio v-for="item in tender" :key="item.id" :label="item.codemc" :value="item.code"></Radio>
                            </RadioGroup>
                        </FormItem>
                    </Col>

                    <Col span="7" v-if="formCustom.sfzb === '招标'">
                        <FormItem  label="招标项目编号" prop="zbxmbh">
<!--                            <Tooltip content="合同编号" placement="top-start">-->
                            <Input type="text" v-model="formCustom.zbxmbh" placeholder="请填写招标项目编号" />
<!--                            </Tooltip>-->
                        </FormItem>
                    </Col>
                </Row>
            </Card>
            <Card class="line-style" v-for="(item,index) in formCustom.bz_info" :key="index">
                <div class="line-wrap">
                    <div class="line-main">
                        <Row>
                            <Col span="7">
                                <Form-item label="包组名称" :prop="`bz_info[${index}].bagGroupName`" :rules="[{ required: true, message: '请填写包组名称', trigger: 'blur' }]">
                                    <i-input type="text" v-model="item.bagGroupName" placeholder="请填写包组名称"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="14">
                                <Form-item label="包组内容" :prop="`bz_info[${index}].bagGroupContent`" :rules="[{ required: true, message: '请填写包组内容', trigger: 'blur' }]">
                                    <Input v-model="item.bagGroupContent" maxlength="100" show-word-limit type="textarea" placeholder="请填写包组内容（100字以内）" />
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <FormItem  label="招标单位/采购单位" :prop="`bz_info[${index}].zbUnitName`" :rules="[{ required: true, message: '请填写招标单位/采购单位', trigger: 'blur' }]">
                                    <Input type="text" v-model="item.zbUnitName" placeholder="请填写招标单位/采购单位" />
                                </FormItem>
                            </Col>
                            <Col span="7">
<!--                                <Form-item label="中标单位名称" :prop="`bz_info[${index}].bidUnitName`" :rules="[{ required: true,type:'array', message: '请填写中标单位名称', trigger: 'change' }]">-->
                                <Form-item label="中标单位名称" :prop="`bz_info[${index}].bidUnitName`" :rules="[{ required: true, message: '请填写中标单位名称', trigger: 'blur' }]">
                                    <Input type="text" v-model="item.bidUnitName" placeholder="请填写中标单位名称" />
<!--                                    <Cascader :data="data" v-model="item.bidUnitName" change-on-select placeholder="请填写中标单位名称"></Cascader>-->
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="中标金额" :prop="`bz_info[${index}].bidMoney`" :rules="[{ required: true, message: '请填写中标金额', trigger: 'blur' },{ validator: validateFloat, trigger: 'blur' }]" >
                                    <Input type="number" v-model="item.bidMoney" placeholder="请填写中标金额" >
                                        <span slot="append">万元</span>
                                    </Input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="甲方法人">
                                    <i-input type="text" v-model="item.A_legalPerson" placeholder="请填写甲方法人" @on-blur="isWu(item.A_legalPerson,'formCustom.bz_info['+index+'].A_legalPerson')"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="甲方经办人">
                                    <i-input type="text" v-model="item.A_manager" placeholder="请填写甲方经办人" @on-blur="isWu(item.A_manager,'formCustom.bz_info['+index+'].A_manager')"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="手机号">
                                    <i-input type="text" v-model="item.A_tel" placeholder="请填写手机号" @on-blur="isWu(item.A_tel,'formCustom.bz_info['+index+'].A_tel')"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="乙方法人">
                                    <i-input type="text" v-model="item.B_legalPerson" placeholder="请填写乙方法人" @on-blur="isWu(item.B_legalPerson,'formCustom.bz_info['+index+'].B_legalPerson')"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="乙方经办人">
                                    <i-input type="text" v-model="item.B_manager" placeholder="请填写乙方经办人" @on-blur="isWu(item.B_manager,'formCustom.bz_info['+index+'].B_manager')"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="手机号">
                                    <i-input type="text" v-model="item.B_tel" placeholder="请填写手机号" @on-blur="isWu(item.B_tel,'formCustom.bz_info['+index+'].B_tel')"></i-input>
                                </Form-item>
                            </Col>
                            <Col span="7">
                                <Form-item label="合同签订日期" :prop="`bz_info[${index}].contract_time`" :rules="[{ required: true, message: '请填写合同签订日期', trigger: 'blur' }]">
                                    <DatePicker @on-change="contractChange($event, item)" :value="item.contract_time"
                                                format="yyyy-MM"
                                                type="month" placeholder="选择合同签订日期"></DatePicker>
                                </Form-item>
                            </Col>
                        </Row>
                        <Row justify="center" type="flex">
                            <Col v-if="!showDetail">
                                <Button type="success" @click="addLine()">添加包组</Button>&nbsp;&nbsp;
                                <Button type="error" @click="delLine(index)">删除包组</Button>
                            </Col>
                        </Row>
                    </div>
                </div>
            </Card>
            <Card class="line-style">
                <Row>
                    <Col span="20">
                        <FormItem  label="使用状况" prop="syzk">
                            <RadioGroup v-model="formCustom.syzk" type="button">
                                <Radio v-for="item in usage" :key="item.id" :label="item.codemc"></Radio>
                            </RadioGroup>
                        </FormItem>
                    </Col>
                </Row>
            </Card>
        </Form>
        <Row justify="center" type="flex" style="margin-top: 10px" v-if="!showDetail">
            <Col>
                <Button type="primary" @click="validateForm('formCustom')">保存</Button>
            </Col>
        </Row>
    </div>
</template>

<script>
// import { getStreetData } from '@/api/outbreak-management/public'
import { insert, findList, getDepartmentList, getUsage, getTender } from '@/api/outbreak-management/government-Informationization-project/weak-current-engineering-project'

// 街道疫情概览
export default {
  data () {
    const validateFloat = (rule, value, callback) => {
      const reg = /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/
      if (!reg.test(value)) {
        callback(new Error('最多只允许两位小数'))
      } else {
        callback()
      }
    }
    return {
      validateFloat: (rule, value, callback) => {
        const reg = /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/
        if (!reg.test(value)) {
          callback(new Error('最多只允许两位小数'))
        } else {
          callback()
        }
      },
      // 时间限制 不可选择当天之前
      timeLimit: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now()
        }
      },
      // 提示框
      affirmModal: false,
      // 控制保存按钮显隐
      showDetail: false,
      // 控制回退按钮显示
      showBackBtn: false,
      currentIndex: '',
      // 添加表单
      formCustom: {
        xmmc: '', // 项目名称
        // jsdwmc: [], // 建设单位名称
        jsdwmc: '', // 建设单位名称
        lxr: '无', // 联系人
        sjh: '无', // 手机号
        lbjje: '', // 拦标价金额
        sjtze: '', // 实际投资额
        xmjdms: '', // 项目简单概述
        sfzb: '', // 是否招标
        sbrq: '', // 上报日期
        zbxmbh: '', // 招标项目编号
        // 包组
        bz_info: [{
          bagGroupName: '', // 包组名称
          bagGroupContent: '', // 包组内容
          // bidUnitName: [], // 中标单位名称
          zbUnitName: '', // 中标单位名称
          bidUnitName: '', // 中标单位名称
          bidMoney: '', // 中标金额
          A_legalPerson: '无', // 甲方法人
          A_manager: '无', // 甲方经办人
          A_tel: '无', // 手机号
          B_legalPerson: '无', // 乙方法人
          B_manager: '无', // 乙方经办人
          B_tel: '无', // 乙方电话
          contract_time: ''// 合同签订日期
        }],
        syzk: ''// 使用状况
      },
      // 表单规则
      formRules: {
        xmmc: [
          { required: true, message: '项目名称必填', trigger: 'blur' }
        ],
        jsdwmc: [
          // { required: true, type: 'array', message: '建设单位名称必填', trigger: 'change' }
          { required: true, message: '建设单位名称必填', trigger: 'blur' }
        ],
        lxr: [
          { required: true, message: '联系人必填', trigger: 'blur' }
        ],
        sjh: [
          { required: true, message: '手机号必填', trigger: 'blur' }
        ],
        sjtze: [
          { required: true, type: 'number', message: '实际投资额必填', trigger: 'blur' },
          { validator: validateFloat, trigger: 'blur' }
        ],
        xmjdms: [
          { required: true, message: '项目简单概述必填', trigger: 'blur' }
        ],
        sfzb: [
          { required: true, message: '是否招标必填', trigger: 'blur' }
        ],
        zbxmbh: [
          { required: true, message: '招标项目编号必填', trigger: 'blur' }
        ],
        syzk: [
          { required: true, message: '使用状况必填', trigger: 'blur' }
        ],
        sbrq: [
          { required: true, message: '上报时间必填', trigger: 'blur' }
        ]
      },
      // 单位
      data: [],
      // 使用状态接口数据
      usage: [],
      // 是否招标接口数据
      tender: [],
      // 编辑的时间
      id: false,

      flag: false
    }
  },
  created () {
    this.isEditStatus()
    // this.getDepartmentList()
    this.getUsage()
    this.getTender()
  },
  methods: {
    // 获取使用状况
    getUsage () {
      getUsage().then(({ data }) => {
        let { data: res, errcode } = data
        if (errcode === 0 && res.length > 0) {
          this.usage = res
        }
      })
    },
    // 获取是否招标
    getTender () {
      getTender().then(({ data }) => {
        let { data: res, errcode } = data
        if (errcode === 0 && res.length > 0) {
          this.tender = res
        }
      })
    },
    // 获取单位一级下拉
    getDepartmentList () {
      getDepartmentList().then(({ data }) => {
        let { data: res, errcode } = data
        if (errcode === 0 && res.length > 0) {
          let list = []
          res.forEach((item) => {
            // let dep = {
            //   id: '',
            //   value: '',
            //   label: ''
            // }
            // dep.id = res[item].yjpid
            // dep.value = res[item].yidw
            // dep.label = res[item].yidw
            // if (res[item].yjpid !== '0') {
            //   dep.children = []
            //   dep.loading = false
            // }
            // list.push(dep)

            if (item.yjpid === '0') {
              list.push({ value: item.yidw, label: item.yidw, id: item.yjpid })
            } else {
              getDepartmentList({ yjpid: item.yjpid }).then(({ data }) => {
                list.push({ value: item.yidw, label: item.yidw, id: item.yjpid, children: data.data, loading: false })
              })
            }
          })
          this.data = list
        }
      })
    },
    // 获取单位二级下拉
    loadData (item, callback) {
      item.loading = true
      setTimeout(() => {
        getDepartmentList({ yjpid: item.id }).then(({ data }) => {
          let { data: res, errcode } = data
          if (errcode === 0 && res.length > 0) {
            item.children = res
          }
          item.loading = false
          if (!this.flag) {
            callback()
          } else {
            this.flag = false
          }
        })
      }, 1000)
    },

    // 是否为无
    isWu (value, el) {
      if (value === '') {
        this.eval('this.' + el + '="无"')
      }
    },
    // 日期转字符串
    dateChange (date) {
      this.formCustom.sbrq = date
    },
    /**
       * 日期格式化
       */
    contractChange (date, item) {
      item.contract_time = date
    },
    // 重置
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    // 校验保存数据
    validateForm (name) {
      console.log(this.$refs[name])
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.affirmModal = true
        } else {
          this.$Message.error('表单验证失败,请检查后再试!')
        }
      })
    },
    // 保存
    handleSubmit (name) {
      let formCustom = { ...this.formCustom }
      if (this.showBackBtn) {
        this.handleEdit(formCustom)
      } else {
        this.handleAdd(formCustom)
      }
    },
    // 新增
    handleAdd (formCustom) {
      formCustom.bz_info = JSON.stringify(formCustom.bz_info)
      // formCustom.jsdwmc = JSON.stringify(formCustom.jsdwmc)
      insert(formCustom).then(({ data }) => {
        let { errcode } = data
        if (errcode === 0) {
          this.$Message.success('保存成功!')
          this.currentIndex = ''
        } else {
          this.$Message.warning('操作失败!')
        }
      })
    },
    // 修改
    handleEdit (formCustom) {
      formCustom.bz_info = JSON.stringify(formCustom.bz_info)
      // formCustom.jsdwmc = JSON.stringify(formCustom.jsdwmc)
      insert(formCustom).then(({ data }) => {
        let { errcode } = data
        if (errcode === 0) {
          this.$Message.success('更新成功!')
          this.currentIndex = ''
        } else {
          this.$Message.warning('操作失败!')
        }
      })
    },
    // 获取修改信息
    getEditInfo () {
      findList({ id: this.id }).then(res => {
        let { errcode, data } = res.data
        if (errcode === 0) {
          let formCustom = data
          // formCustom.sbrq = this.$common.moment(formCustom.sbrq).format('YYYY-MM-DD')
          // formCustom.jsdwmc = JSON.parse(formCustom.jsdwmc)
          formCustom.sjtze = Number(formCustom.sjtze)
          formCustom.bz_info = JSON.parse(formCustom.bz_info)
          this.formCustom = formCustom
          this.flag = true
        } else {
          this.$Message.success('获取信息失败!')
        }
      })
    },
    // 修改状态
    isEditStatus () {
      if (this.$route.query && this.$route.query.id) {
        this.showBackBtn = true
        this.id = this.$route.query.id
        this.getEditInfo()
        if (this.$route.query.showDetail) {
          this.showDetail = true
        }
      } else {
      }
    },
    addLine () {
      this.formCustom.bz_info.push(
        {
          bagGroupName: '',
          bagGroupContent: '',
          // bidUnitName: [],
          zbUnitName: '',
          bidUnitName: '',
          bidMoney: '',
          A_legalPerson: '无',
          A_manager: '无',
          A_tel: '无',
          B_legalPerson: '无',
          B_manager: '无',
          B_tel: '无',
          contract_time: ''
        })
    },
    delLine (index) {
      let len = this.formCustom.bz_info.length
      if (len === 1) {
        this.$Message.warning('只有一条数据不允许删除!')
        return
      }
      this.formCustom.bz_info.splice(index, 1)
      this.clearValidate()
    },
    clearValidate () {
      this.$nextTick(() => {
        let formData = JSON.stringify(this.formCustom)
        this.$refs.formCustom.resetFields()
        this.formCustom = JSON.parse(formData)
      })
    }
  }
}
</script>

<style scoped>
    h3 {
        margin: 10px auto;
    }

    .bag_group_piece {
        padding: 10px 0;
        margin-bottom: 10px;
        border: 1px solid #dcdee2;
    }
</style>
